<template>
    <div>
        <home></home>
        <button @click="addName">+name</button>
    </div>
</template>

<script>
    import Home from './Home.vue'
    import { computed } from 'vue';

    export default {
        components: {
            Home 
        },
        provide() {
            return {
                name: 'leon',
                age: 18,
                // provide写成函数this绑定就不是undefined 这样可以引用data里面的数据
                // computed是为了让names改变,length及时刷新
                length: computed(() => this.names.length)
            }
        },
        data() {
            return {
                names: ['abc', 'cba', 'bac']
            }
        },
        methods: {
            addName() {
                this.names.push('why')
            }
        }
    }
</script>

<style scoped>

</style>